/***
 * 
 */
define( [ 'Vue', 'axios' ], function ( Vue, axios ) {
    return Vue.component('MetricComponent', {
        data : function() {
            return {
                providers : []
            };
        },

        mounted : function () {
            var _this = this;

            axios.get('application.json') .then(function (response) {
                _this.providers = response.data;
            });
        },

        template : `
            <div>
                <a>Metric 关联</a>
                <a href="#/">INDEX PAGE</a>
                <br/>
                <br/>
                <table border="1">
                    <tr>
                        <td><a href="#">#</a></td>
                        <td><a href="#">processName</a></td>
                        <td><a href="#">name</a></td>
                        <td><a href="#">host</a></td>
                        <td><a href="#">port</a></td>
                        <td><a href="#">startTime</a></td>
                        <td><a href="#">相关</a></td>
                    </tr>

                    <tr v-for="(item, index) in providers">
                        <td><a :href="'/budo-graph/' + item.host + '/' + item.port + '/metric.html?method=' + $route.query.key" target="_blank">{{index+1}}</a></td>
                        <td>{{item.processName}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.host}}</td>
                        <td>{{item.port}}</td>
                        <td>{{item.startTime}}</td>
                        <td><MetricRef :metricKey="$route.query.metricKey" :host="item.host" :port="item.port"/></td>
                    </tr>
            </div>
        `
    });
});